<!-- 拖拽布局区域 -->
<template>
  <div class="dragger-center">
    <div class="btn-list">
      <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
        <el-radio-button value="pc">pc</el-radio-button>
        <el-radio-button value="pad">pad</el-radio-button>

        <el-radio-button value="mobile">mobile</el-radio-button>
      </el-radio-group>
      <p class="left-col" style="color: red">先选容器，再选组件</p>
      <ul class="left-col">
        <li @click="handleClear">清空</li>
        <li>预览</li>
        <li>导出代码</li>
      </ul>
    </div>
    <div class="dragger-center-bottom">
      <div class="dragger-center-content">
        <TargetContainer
          :items="targetItems"
          :onAddItem="addItem"
          :onRemoveItem="removeItem"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const tabPosition = ref("pc");
// 目标容器数据
let targetItems = ref<any>([]);
// 添加新项目的方法
const addItem = (item: any) => {
  targetItems.value.push(item);
};
const handleClear = () => {
  //清空目标容器数据
  targetItems.value = [];
};
// 删除项目的方法
const removeItem = (id: string) => {
  const index = targetItems.value.findIndex((item: any) => item.id === id);
  if (index !== -1) {
    targetItems.value.splice(index, 1);
  }
};
</script>

<style lang="scss" scoped>
.dragger-center {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  .dragger-center-bottom {
    background-color: $color_2;
    flex: 1;
    height: 100%;
    padding: 8px;
  }
  .btn-list {
    width: 100%;
    padding: 0 8px;
    margin-top: 14px;
    font-size: 14px;
    display: flex;
    // align-items: center;
    height: 40px;
    justify-content: space-between;
    p {
    }
    ul {
      height: 30px;
    }
    li {
      margin-right: 6px;
      color: $color_3;
      cursor: pointer;
    }
  }
  .dragger-center-content {
    height: 100%;
    background-color: white;
  }
}
</style>
